<template>
  <el-container style="flex-direction:column;">
    <el-row style="padding-bottom: 20px;">
      <el-button v-if="getMenuListByPath.add" type="primary" size="mini" icon="el-icon-plus" @click="add">新增</el-button>
      <el-button v-if="getMenuListByPath.update" type="success" size="mini" icon="el-icon-edit" :disabled="multipleSelection.length !== 1" @click="handleEdit(null,multipleSelection[0])">修改</el-button>
      <el-button v-if="getMenuListByPath.delete" type="danger" size="mini" icon="el-icon-delete" :disabled="multipleSelection.length == 0" @click="deleteHandleClick">删除</el-button>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="16">
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span>角色列表</span>
          </div>
          <el-table
            @selection-change="selectionChange"
            ref="singleTable"
            @row-click="rowClick"
            highlight-current-row
            :data="tableData" size="mini"
            style="width: 100%">
            <el-table-column align="center" header-align="center"
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column
              type="index"
              width="50">
            </el-table-column>
            <el-table-column align="center" header-align="center"
              prop="roleName"
              label="名称">
            </el-table-column>
            <el-table-column v-if="getMenuListByPath.update || getMenuListByPath.delete" label="操作" width="160" align="center" header-align="center" fixed="right">
              <template slot-scope="scope">
                <el-button style="margin-right:3px;" v-if="getMenuListByPath.update"
                  size="mini"  type="primary"
                  @click="handleEdit(scope.$index, scope.row)"  icon="el-icon-edit"></el-button>
                <el-popconfirm v-if="getMenuListByPath.delete"
                  placement="top"
                  confirm-button-text='确定'
                  cancel-button-text='取消'
                  icon="el-icon-delete"
                  icon-color="red"
                  title="确定删除本条数据吗？"
                  @confirm="handleDelete(scope.$index, scope.row)"
                >
                  <el-button
                    size="mini" slot="reference"
                    type="danger" icon="el-icon-delete"></el-button>
                </el-popconfirm>
               
              </template>
            </el-table-column>
          </el-table>
        </el-card>

      </el-col>
      <el-col :span="8">
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span>菜单分配</span>
            <el-button v-if="getMenuListByPath.update" style="float: right;" type="primary" size="mini" @click="updateMenu">保存</el-button>
          </div>
          <el-tree
            check-strictly
            :data="data"
            show-checkbox
            node-key="permissionId"
            ref="tree"
            default-expand-all
            :default-expanded-keys="[]"
            :default-checked-keys="defaultCheckedKeys"
            :props="defaultProps">
          </el-tree>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog :title="dialogTitle" :visible.sync="roleDialog" :before-close="closeRoleDialog">
      <el-form :model="roleDialogForm" status-icon :rules="roleDialogFormRules" ref="roleDialogFormRef" label-width="100px" class="demo-ruleForm">
        <el-form-item label="名称" prop="roleName">
          <el-input v-model="roleDialogForm.roleName" placeholder="请输入角色名称"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeRoleDialog">取 消</el-button>
        <el-button type="primary" @click="updateRoleDialogCommit">确 定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<script>
import {getAllMenu} from '@/api/modules/SystemManagement/menuManagement'
import {getAllRole,getRoleByRoleId,updateRoleByRoleId,addRole,updateRole,deleteRoleById,deleteRoleByIdList} from '@/api/modules/SystemManagement/roleManagement'
export default {
  props:["getMenuListByPath"],
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      data: [],
      defaultProps: {
        children: 'children',
        label: 'permissionName'
      },
      defaultCheckedKeys:[],
      currentRow: null,
      dialogTitle:"",
      roleDialog:false,
      roleDialogForm:{
        roleId:null,
        roleName:""
      },
      roleDialogFormRules: {
        roleName:[
          { required: true, message: '请输入角色名称', trigger: 'blur' },
        ],
      },
    }  
},
  created(){
    this.getAllMenu()
    this.getAllRole()
  },
  mounted(){
  },
  methods: {
    onSubmit() {
      console.log('submit!');
    },
    //table编辑操作
    handleEdit(index, row) {
      // console.log(index, row);
      this.roleDialogForm.roleId=parseInt(row.roleId)
      this.roleDialogForm.roleName=row.roleName.toString();
      this.dialogTitle="编辑角色"
      this.roleDialog = true
    },
    //删除按钮点击事件
    deleteHandleClick(){
      let data = [];
      for(let j=0 ; j < this.multipleSelection.length; j++) {
        data.push(this.multipleSelection[j].roleId);
      }
      deleteRoleByIdList(data).then(()=>{
        this.getAllRole()
      })
    },
    //表格删除事件
    handleDelete(index, row) {
      console.log(index, row);
      deleteRoleById({id:row.roleId}).then(()=>{
        this.getAllRole()
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    //table表格选择的数组
    selectionChange(val){
      this.multipleSelection = val;
    },
    //新增按钮点击事件
    add(){
      this.roleDialogForm.roleId=null
      this.roleDialogForm.roleName=""
      this.dialogTitle="新增角色"
      this.roleDialog = true
    },
    //关闭Roledialog
    closeRoleDialog(){
      this.roleDialogForm={
        roleId:null,
        roleName:""
      },
      this.$refs["roleDialogFormRef"].resetFields();
      this.roleDialog = false
    },
    //RoleDialog确定
    updateRoleDialogCommit(){
      this.$refs["roleDialogFormRef"].validate((valid) => {
        if (valid) {
           // alert('submit!');
            if(this.dialogTitle == "新增角色"){
              addRole(this.roleDialogForm).then(()=>{
                this.closeRoleDialog()
                this.getAllRole()
              })
            }else {
              updateRole(this.roleDialogForm).then(()=>{
                this.closeRoleDialog()
                this.getAllRole()
              })
            }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //修改菜单
    updateMenu(){
      let data = this.$refs.tree.getCheckedKeys();
      // console.log(data)
      updateRoleByRoleId({id:this.currentRow.roleId,set:data}).then(()=>{
      })
    },
    //表格某一行被点击
    rowClick(row){
      // console.log(row)
      this.currentRow = row;
      this.$refs.singleTable.setCurrentRow(row);
      this.getRoleByRoleId(row.roleId);
    },
    getAllMenu(){
      getAllMenu().then(res=>{
        this.data = res.data.data
      })
    },
    getAllRole(){
      getAllRole().then(res=>{
        this.tableData = res.data.data
        this.rowClick(this.tableData[0])
      })
    },
    getRoleByRoleId(id){
      getRoleByRoleId({id:id}).then(res=>{
        this.defaultCheckedKeys = res.data.data
        this.$refs.tree.setCheckedKeys(this.defaultCheckedKeys)
      })
    }
  } 
}
</script>

<style scoped>
.el-pagination{
  display: flex;
  flex-wrap: wrap;
}
.el-container >>> .el-pagination__jump{
  margin-left: 0;
}
</style>